<template>
  <div class="lnzzqs" ref="echarts"></div>
</template>

<script>
export default {
  props: {
    dataInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          textStyle: {
            color: '#333' //字体颜色
          },
          data: ['总种植面积', '经营户种植面积']
        },

        grid: {
          top: '15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#FFCF3B', '#22F6F7'],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2023', '2022', '2021', '2020', '2019', '2018', '2017'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'solid', //虚线
                color: ['#333']
              },
              show: true //隐藏
            }
          }
        ],
        series: [
          {
            name: '总种植面积',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.dataInfo.val23.split(',')
          },
          {
            name: '经营户种植面积',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.dataInfo.val24.split(',')
          }
        ]
      }
      const echarts = this.$echarts.init(this.$refs.echarts)
      echarts.setOption(option)
    }
  }
}
</script>

<style>
.lnzzqs {
  height: 350px;
}
</style>
